let chkboxicons = document.querySelectorAll('#items .checkbox .fakechkbox');
// let chkbox = document.querySelector('#items .checkbox input');
let chkboxSelectAll = document.querySelector('#checkout .checkbox .fakechkbox');
let addBtns = document.querySelectorAll('.counter .add');
let subBtns = document.querySelectorAll('.counter .sub');
let textInputs = document.querySelectorAll('.counter input');
let selectedNum = document.querySelector('.selectedNum');
let priceNums = document.querySelectorAll('.priceNum');
let total = document.querySelector('.sum span');
 
// 全选复选框的点击事件
chkboxSelectAll.addEventListener('click', function(){
    totalPrice = 0; // 先把总价归零
    let chkbox = this.parentNode.childNodes[1];
    if (chkbox.checked) {
        this.style.border = '1px solid #ccc';
        this.style.backgroundColor = 'transparent';
        this.style.innerHTML = '';
        selectedNum.innerHTML = 0; // 修改选中的个数
    } else {
        this.style.border = '0';
        this.style.backgroundColor = '#e43130';
        this.style.innerHTML = '✔';
        selectedNum.innerHTML = chkboxicons.length; // 修改选中的个数
    }
    this.parentNode.childNodes[1].checked = !this.parentNode.childNodes[1].checked;

    for (let i = 0; i < chkboxicons.length; i++) {
        if (chkbox.checked) {
            chkboxicons[i].style.border = '0';
            chkboxicons[i].style.backgroundColor = '#e43130';
            chkboxicons[i].style.innerHTML = '✔';

            // ---------------计算总价----------------
            // 获取个数
            let count = parseInt(textInputs[i].value);
            // 获取价格
            let price = parseFloat(priceNums[i].innerHTML);
            totalPrice += count * price;

        } else {
            chkboxicons[i].style.border = '1px solid #ccc';
            chkboxicons[i].style.backgroundColor = 'transparent';
            chkboxicons[i].style.innerHTML = '';
        }
        chkboxicons[i].parentNode.childNodes[1].checked = chkbox.checked;
    }
    console.log(totalPrice);
    total.innerHTML = totalPrice.toFixed(2);
});

// 封装一个函数，用于判断是否被选中，并修改复选框的样式
function changeCheckBoxStatus(obj, isChecked) {
    if (isChecked) {
        obj.style.border = '0';
        obj.style.backgroundColor = '#e43130';
        obj.style.innerHTML = '✔';
    } else {
        obj.style.border = '1px solid #ccc';
        obj.style.backgroundColor = 'transparent';
        obj.style.innerHTML = '';
    }
    obj.parentNode.childNodes[1].checked = isChecked;
}

let sum = document.querySelector('.sum span');

let totalPrice = 0;
// 实现了复选框的点击功能
for (let i = 0; i < chkboxicons.length; i++) {
    chkboxicons[i].addEventListener('click', function(){
        let chkbox = chkboxicons[i].parentNode.childNodes[1];
        // let count = 0; // 用于记录商品input框中的个数
        // 获取个数
        let count = parseInt(this.parentNode.parentNode.childNodes[5].childNodes[3].value);
        // 获取价格
        let price = parseFloat(this.parentNode.parentNode.childNodes[3].childNodes[3].childNodes[5].childNodes[1].innerHTML);

        if (chkbox.checked) {
            this.style.border = '1px solid #ccc';
            this.style.backgroundColor = 'transparent';
            this.style.innerHTML = '';
            selectedNum.innerHTML = parseInt(selectedNum.innerHTML) - 1;
            totalPrice -= count * price;
        } else {
            this.style.border = '0';
            this.style.backgroundColor = '#e43130';
            this.style.innerHTML = '✔';
            selectedNum.innerHTML = parseInt(selectedNum.innerHTML) + 1;
            totalPrice += count * price;
        }
        
        console.log(totalPrice);
        total.innerHTML = totalPrice.toFixed(2);


        chkboxicons[i].parentNode.childNodes[1].checked = !chkboxicons[i].parentNode.childNodes[1].checked;

        // 每次点击，遍历所有checkbox，判断是否全部选中
        let isAllChecked = true;
        for (let j = 0; j < chkboxicons.length; j++) {
            let chkbox = chkboxicons[j].parentNode.childNodes[1];

            if (!chkbox.checked) {
                isAllChecked = false;
                break;
            }
        }
        if (isAllChecked) {
            chkboxSelectAll.style.border = '0';
            chkboxSelectAll.style.backgroundColor = '#e43130';
            chkboxSelectAll.style.innerHTML = '✔';
            
        } else {
            chkboxSelectAll.style.border = '1px solid #ccc';
            chkboxSelectAll.style.backgroundColor = 'transparent';
            chkboxSelectAll.style.innerHTML = '';
        }
        chkboxSelectAll.parentNode.childNodes[1].checked = isAllChecked;

        
    });
}

// 给数量增加按钮绑定点击事件
for (let i = 0; i < addBtns.length; i++) {
    addBtns[i].addEventListener('click', function(){
        let count = parseInt(this.parentNode.childNodes[3].value);
        count++;
        if (count > 200) {
            count = 200;
            return;
        }

        // this.parentNode.childNodes[3].setAttribute.value = count;
        this.parentNode.childNodes[3].setAttribute('value', count);

        if (this.parentNode.parentNode.childNodes[1].childNodes[1].checked) {
            totalPrice += parseFloat(this.parentNode.parentNode.childNodes[3].childNodes[3].childNodes[5].childNodes[1].innerHTML);
            console.log(totalPrice);
            total.innerHTML = totalPrice.toFixed(2);
        }
    });
}

// 给数量减少按钮绑定点击事件
for (let i = 0; i < subBtns.length; i++) {
    subBtns[i].addEventListener('click', function(){
        let count = parseInt(this.parentNode.childNodes[3].value);
        console.log(parseInt(this.parentNode.childNodes[3].value));
        count--;
        if (count < 1) {
            count = 1;
            return;
        }
        this.parentNode.childNodes[3].setAttribute('value', count);

        if (this.parentNode.parentNode.childNodes[1].childNodes[1].checked) {
            totalPrice -= parseFloat(this.parentNode.parentNode.childNodes[3].childNodes[3].childNodes[5].childNodes[1].innerHTML);
            console.log(totalPrice);
            total.innerHTML = totalPrice.toFixed(2);
        }
    });
}

let focusVal = 1;
for (let i = 0; i < textInputs.length; i++) {
    // 购物车数量input框的获取焦点事件：用于记录当用户点击input框时的数量
    textInputs[i].addEventListener('focus', function(){
        focusVal = this.value; 
    });
    // 购物车数量input框的失焦事件
    textInputs[i].addEventListener('blur', function(){
        let str = this.value;
        // 判断是否属于1~200之间的正整数
        isRightNum(this, str);
    });
}

// 判断input的value是否是1~200之间的正整数
function isRightNum(input, str) {
    var regex = /^[0-9]+\d*$/; // 正则表达式，验证是否是正整数
    if(regex.test(str)){ 
        let num = parseInt(str);
        if (num >= 1 && num <= 200) { // 判断该正整数是否在1~200之间
            console.log(num);
        } else {
            input.value = focusVal;
            alert("请输入1~200之间的正整数！");
        }
    } else {
        input.value = focusVal;
        alert("请输入1~200之间的正整数！");
    }
}

// 实现返回上一个页面的功能
let back = document.querySelector('.back');
back.addEventListener('click', function(){
    // history.back();
    history.go(-1);
});

